import path from 'path';
import Vue from 'vue';
import Main from 'Main';
import { createBundleRenderer, createRenderer } from 'vue-server-renderer'

class SSR {
  statsFile
  constructor(name, pagename) {
    this.statsFile = path.resolve(
      `_build_/${name}/${pagename}/vue-ssr-server-bundle.json`,
    );
  }
  async render(data) {
    // let modules = [];
    const renderer = createBundleRenderer(this.statsFile, {
      // ……renderer 的其他选项
    })
    const html = createRenderer().renderToString(Main);
    // let jsx,
    //   html,
    //   renderedScriptTags,
    //   renderedLinkTags,
    //   renderedStyleTags,
    //   scStyleTags,
    //   styleTags;
    // let initDataScript = {};
    // try {
    //   if (Main.getInitialProps) {
    //     initDataScript = await Main.getInitialProps(data);
    //   }
    //   jsx = extractor.collectChunks(
    //     sheet.collectStyles(<Main {...initDataScript} />),
    //   );
    //   html = ReactDOMServer.renderToString(jsx);

    //   // You can now collect your script tags
    //   renderedScriptTags = extractor.getScriptTags(); // or extractor.getScriptElements();
    //   renderedScriptTags =
    //     `<script>
    //     var __SERVRE_DATA__ = ${JSON.stringify(initDataScript)}
    //   </script>` + renderedScriptTags;
    //   // You can also collect your "preload/prefetch" links
    //   renderedLinkTags = extractor.getLinkTags(); // or extractor.getLinkElements();
    //   // And you can even collect your style tags (if you use "mini-css-extract-plugin")
    //   renderedStyleTags = extractor.getStyleTags(); // or extractor.getStyleElements();

    //   scStyleTags = sheet.getStyleTags();

    //   styleTags = `${renderedStyleTags || ''}${scStyleTags || ''}`;

    //   // console.log('html: ', html);
    //   // console.log('renderedScriptTags: \n', renderedScriptTags);
    //   // console.log('renderedLinkTags: \n', renderedLinkTags);
    //   // console.log('renderedStyleTags: \n', renderedStyleTags);
    //   // console.log('scStyleTags: \n', scStyleTags);
    //   // console.log('together StyledTags: \n', styleTags);
    // } catch (err) {
    //   console.error(err);
    // } finally {
    //   sheet.seal();
    // }

    // return {
    //   html,
    //   extractor,
    //   initDataScript,
    //   scriptTags: renderedScriptTags || '',
    //   linkTags: renderedLinkTags || '',
    //   styleTags: styleTags || '',
    // };
  }
}

// 导出一个工厂函数，用于创建新的
// 应用程序、router 和 store 实例
// export function createApp() {
//   const initialData = window.__SERVRE_DATA__ || {};
//   const app = new Vue({
//     // 根实例简单的渲染应用程序组件。
//     render: (h) => (
//       <div>
//         <Main adasd="asdasd"/>
//       </div>
//     ),
//   });
//   return { app };
// }

// const { app } = createApp();

// app.$mount('#app');
